<template>
  <el-aside width="200px">
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#409eff"
      :unique-opened="true"
      :router="true"
      :default-active="activePath"
    >
      <el-submenu v-for="(menu, index) in menus" :index="index + ''" :key="index + ''">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{menu.name}}</span>
        </template>
        <el-menu-item
          v-for="(subMenu, subIndex) in menu.children"
          :index="subMenu.path"
          :key="index + '-' + subIndex"
          @click="savePathState(subMenu.path)"
        >
          <i :class="subMenu.icon"></i>
          <span slot="title">{{subMenu.name}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'LeftNav',
  computed: {
    activePath: function() {
      return window.sessionStorage.getItem('activePath');
    },
    menus: function() {
      var menus = [];
      if (window.sessionStorage.getItem('login_user_type') === '1') {
        menus.push({
          name: '基础设置',
          icon: 'el-icon-location',
          children: [
            { name: '类型管理', icon: 'el-icon-setting', path: '/tree' },
            { name: '公告管理', icon: 'el-icon-setting', path: '/billboard' }
          ]
        });
      }

      menus.push({
        name: '教学成绩',
        icon: 'el-icon-location',
        children: [
          { name: '教学成绩', icon: 'el-icon-setting', path: '/score' }
        ]
      });

      return menus;
    }
  },
  methods: {
    // 保存当前激活的菜单路径
    savePathState: function(path) {
      window.sessionStorage.setItem('activePath', path);
    }
  }
};
</script>

<style lang="less" scoped>
.el-aside {
  background-color: #545c64;
  .el-menu {
    border-right: none;
  }
}
</style>
